<template>
  <el-form
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-width="labelWidth"
  >
    <el-row :gutter="gutter">
      <el-col
        v-for="(item, index) in itemConfigFiltered"
        :key="item.prop || index"
        :span="item.span || defaultSpan"
      >
        <slot v-if="item.isSlot" :name="item.slotName" />
        <el-form-item
          v-else
          :label-width="item.labelWidth"
          :label="item.label"
          :prop="item.prop"
        >
          <FormItem
            v-model="form[item.prop]"
            :item-option="item"
          />
        </el-form-item>
      </el-col>
      <el-col :span="restSpan" style="display: flex; justify-content: flex-end;">
        <el-button
          type="primary"
          icon="el-icon-search"
          :loading="loading"
          @click="query"
        >查询</el-button>
        <el-button
          icon="el-icon-refresh-left"
          @click="resetForm('ruleForm')"
        >重置</el-button>
        <slot />
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import FormItem from './FormItem'

import { deepClone } from '@/utils/tools'

export default {
  name: 'Search',
  components: {
    FormItem
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: () => {}
    },
    rules: {
      type: Object,
      default: () => {}
    },
    labelWidth: {
      type: String,
      default: '0'
    },
    gutter: {
      type: Number,
      default: 20
    },
    itemConfig: {
      type: Array,
      default: () => []
    },
    hooks: {
      type: Function,
      default: () => {}
    },
    useI18n: {
      type: Boolean,
      default: true
    },

    // 建议传 :submit="query" query是一个promise, 可以方便控制loading
    submit: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      defaultSpan: 6
    }
  },
  computed: {
    // 双向数据绑定
    form: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    restSpan() {
      let sum = 0
      this.itemConfigFiltered.forEach((item) => {
        const { span } = item
        sum += (span || this.defaultSpan)
      })
      return 24 - sum % 24
    },
    // 过滤隐藏后的数据配置项
    itemConfigFiltered() {
      return this.itemConfig.filter(item => !item.hidden)
    }
  },
  methods: {
    // 是否携带冒号翻译语言
    translate(str, withColon = false) {
      if (!str) return ''
      const colon = withColon ? ':' : ''
      return (this.useI18n ? this.$t(str) : str) + colon
    },
    async query() {
      this.$emit('submit', deepClone(this.value))
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.hooks() // 调用hooks，在重置时执行副作用
      this.query()
    },
    close() {
      this.$refs.ruleForm.resetFields()
      this.$emit('close')
    },
    _submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.query()
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
